<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-25 14:01:02
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-31 14:12:08
-->
<template>
  <x-sub-page :content="title" :isFixBtn="true">
    <el-scrollbar class="invoice-info-content" wrap-class="scrollbar-wrapper">
      <!-- 基本信息 -->
      <x-tab :title="$t('financialSynergy.invoice.baseInfo')" :isShowExpand="false">
        <el-descriptions class="margin-top" :column="3" direction="vertical">
          <el-descriptions-item :label="$t('financialSynergy.invoice.supplier')">
            {{ params.supplierName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.invoiceType')">
            {{ selectDictLabel(dictOptions['srm_invoice.invoice_type'], params.invoiceType) }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.invoiceDate')">
            {{ params.invoicingDate }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.invoiceTitle')">
            {{ params.header }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.ird')">
            {{ params.taxId }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.companyPhone')">
            {{ params.registrationPhone }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.companyAddress')">
            {{ params.registrationAddress }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.bank')">
            {{ params.openingBankName }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.bankAccount')">
            {{ params.openingBankAccount }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.paperTicket')">
            {{ params.contacts | emptyVal }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.collectorPhone')">
            {{ params.contactsPhone | emptyVal }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.invocieAddress')">
            {{ params.invoiceMailingAddress }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.lectronicInvoiceAddress')">
            {{ params.invoiceEmail }}
          </el-descriptions-item>

          <el-descriptions-item :label="$t('financialSynergy.invoice.invocieAmount')">
            {{ params.amount ? `${params.amount}元` : '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.creatBy')">
            {{ params.createName }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.ceratTime')">
            {{ params.createTime }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" :column="1" direction="vertical">
          <el-descriptions-item :label="$t('financialSynergy.invoice.remark')" class="no-margin-bottom">
            {{ params.remark | emptyVal }}
          </el-descriptions-item>
        </el-descriptions>
      </x-tab>
      <!-- 对账单明细 -->
      <x-tab :title="$t('financialSynergy.invoice.billsDetail')" :isShowExpand="false">
        <!-- <div :style="{ height: `${billsList.length * 42 + 50}px` }"> -->
        <x-table
          ref="tableCom"
          :is-pagination="false"
          :data-source="billsList"
          :row-key="'id'"
          :height="(billsList?.length > 5 ? billsList.length : 5) * 42 + 50"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            v-for="(item, index) in columns"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth || '-'"
            :label="item.label"
            :sortable="'custom'"
          >
          </el-table-column>
        </x-table>
        <!-- </div> -->
      </x-tab>
      <!-- 发票信息 -->
      <x-tab :title="$t('financialSynergy.invoice.invocieInfo')" :isShowExpand="false">
        <el-descriptions class="margin-top" :column="3" v-if="isHandle === 'view'" direction="vertical">
          <el-descriptions-item :label="$t('financialSynergy.invoice.invoiceCode')">
            {{ params?.infos?.invoiceCode ?? '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.invoiceNumber')">
            {{ params?.infos?.invoiceNo ?? '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.invoiceTimes')">
            {{ params?.infos?.invoicingDate ?? '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.invocieAmountNoTax')">
            {{ params?.infos?.untaxedAmount ? `${params?.infos.untaxedAmount}元` : '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.invocieAmountTax')">
            {{ params?.infos?.amount ? `${params?.infos.amount}元` : '-' }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="margin-top" :column="1" direction="vertical" v-if="isHandle === 'view'">
          <el-descriptions-item :label="$t('financialSynergy.invoice.files')">
            <x-upload
              ref="businessFileUpload"
              :edit-flag="false"
              :limit="9"
              :fileSize="20"
              :old-file-list="params?.infos.files || []"
              :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx']"
            >
            </x-upload>
          </el-descriptions-item>
        </el-descriptions>
        <invoice-form ref="invoiceFormCom" v-if="isHandle !== 'view'" />
      </x-tab>
      <!-- 发票物流信息 -->
      <x-tab :title="$t('financialSynergy.invoice.invoiceLogistics')" v-if="isHandle === 'view'" :isShowExpand="false">
        <el-descriptions class="margin-top" :column="3" direction="vertical">
          <el-descriptions-item :label="$t('financialSynergy.invoice.logisticsCompany')">
            {{
              selectDictLabel(
                dictOptions['srm_delivery_note.logistical_company'],
                params?.logisticsVo?.logisticalCompany
              ) | emptyVal
            }}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('financialSynergy.invoice.logisticsId')">
            {{ params?.logisticsVo?.logisticalNumber ?? '-' }}
          </el-descriptions-item>
          <!-- <el-descriptions-item :label="$t('financialSynergy.invoice.logisticsList')">
            <el-link type="primary" :underline="false" @click="handleLineDeails">{{ $t('common.view') }}</el-link>
          </el-descriptions-item> -->
        </el-descriptions>
      </x-tab>
    </el-scrollbar>
    <fixed-btn-area>
      <el-button @click="isHandle !== 'view' ? handleClose() : handleBack()"> {{ $t('common.cancel') }} </el-button>
      <el-button v-if="isHandle !== 'view'" type="primary" :loading="loading" @click="onSubmit()">
        {{ $t('common.submit') }}
      </el-button>
    </fixed-btn-area>
  </x-sub-page>
</template>
<script>
  import { cloneDeep, throttle, QueryDictMixin, selectDictLabel } from '@package/utils'
  import InvoiceForm from './invoiceForm.vue'
  import { apiPostInvoiceinvoicing, apiGetInvoice } from '../api/invoiceManagement'
  import { itemColumns as columns } from '../config/invoiceManagementConfig'
  import { EnumApiCode } from '../../../../../../globalEnum'

  export default {
    name: 'InvoiceAdviceInfo',
    components: { InvoiceForm },
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        title: this.$t('financialSynergy.invoice.detail'),
        isHandle: '',
        params: {
          files: []
        },
        columns,
        billsList: [],
        srmDictKeys: ['srm_invoice.invoice_type', 'srm_invoice.state', 'srm_delivery_note.logistical_company'],
        loading: false
      }
    },
    created() {
      const data = this.$route.query
      this.isHandle = data?.action ?? ''
      this.getInvocieDetails(data?.id)
      this.initDictConfig()
    },
    methods: {
      selectDictLabel,
      getInvocieDetails(id) {
        apiGetInvoice(id).then(({ data }) => {
          this.params = Object.assign(this.params, cloneDeep(data))
          this.billsList = this.params.details
        })
      },
      onSubmit: throttle(function () {
        this.loading = true
        this.$refs.invoiceFormCom
          .handleValidate()
          .then((data) => {
            const params = {
              ...data,
              invoiceId: this.params.id
            }
            apiPostInvoiceinvoicing(params).then(({ code }) => {
              if (code === EnumApiCode.Success) {
                this.$message.success(this.$t('common.opeartionSuccess'))
                this.handleBack()
              }
            })
          })
          .catch(() => (this.loading = false))
        // this.loading = true
      }),
      // 看物流记录
      handleLineDeails() {},
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      },
      handleClose() {
        this.$confirm(this.$t('common.cancelPrompt'), this.$t('common.tip'), {
          confirmButtonText: this.$t('common.sure'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(async () => {
          this.handleBack()
        })
      }
    }
  }
</script>
<style scoped>
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  ::v-deep .el-scrollbar__bar.is-horizontal {
    height: 0;
  }
  ::v-deep .el-descriptions-item__label {
    color: #707683;
  }
  ::v-deep .el-descriptions-item__content {
    color: #333333;
  }
  /* ::v-deep .x-table-container {
    min-height: 50px;
  } */
</style>
